<template>
  <div
    id="ServerFileSystemImfor"
    ref="ServerFileSystemImfor"
    class="ServerFileSystemImfor"
  >
    <el-form :inline="true">
      <el-row style="text-align: center">
        <!-- 挂载点 -->
        <template v-for="(item, index) in osDataArr">
          <el-col :span="5" :key="index" class="serverFileText">
            <p class="twoLable">{{ item.MOUNTED_ON }}</p>
          </el-col>
        </template>
      </el-row>
      <!-- 图表 -->
      <el-col :span="24" class="waterPage">
        <div ref="waterPolo" class="page"></div>
      </el-col>
      <el-row class="butomLable">
        <!-- 使用情况数值 -->
        <template v-for="(item, index) in osDataArr">
          <el-col :span="5" class="butomLable" :key="index">
            <p class="oneLable">
              可用：
              <span class="lableNumber">{{ item.FREE_GB }}GB</span>
            </p>
            <p class="oneLable">
              总：
              <span class="lableNumber">{{ item.TOTAL_GB }}GB</span>
            </p>
          </el-col>
        </template>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { fetchData } from "@/api/index.js";
import bus from "common/bus.js";
import bubbleSort from '@/plugs/ArrItemSort.js'
export default {
  data() {
    return {
      postData: {
        opera: "fileSystem",
        curPage: 1,
        pageSize: 20,
        sort: {
          sortColumn: "",
          sortOrders: "",
        },
        filtersType: "fuzzyquery",
        filters: {
          monid: "",
        },
      },
      freeGB: "",
      totalGB: "",
      waterPolo: {},
      EChartsOption: {
        series: [
          //系统内存
          {
            radius: "80%",
            type: "liquidFill",
            center: ["12%", "55%"],
            data: [{ value: 0 }],
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderWidth: 4,
                borderColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(69, 73, 240, 0)",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(69, 73, 240, .25)",
                    },
                    {
                      offset: 1,
                      color: "rgba(69, 73, 240, 1)",
                    },
                  ],
                  globalCoord: false,
                },
                shadowBlur: 10,
                shadowColor: "#000",
              },
            },
            label: {
              fontSize: 22,
              color: "rgb(0, 255, 0)",
            },
            backgroundStyle: {
              color: {
                type: "linear",
                x: 1,
                y: 0,
                x2: 0.5,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "rgba(68, 145, 253, 0)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(68, 145, 253, .25)",
                  },
                  {
                    offset: 0,
                    color: "rgba(68, 145, 253, 1)",
                  },
                ],
                globalCoord: false,
              },
            },
          },
          {
            radius: "80%",
            type: "liquidFill",
            center: ["31%", "55%"],
            data: [{ value: 0 }],
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderWidth: 4,
                borderColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(69, 73, 240, 0)",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(69, 73, 240, .25)",
                    },
                    {
                      offset: 1,
                      color: "rgba(69, 73, 240, 1)",
                    },
                  ],
                  globalCoord: false,
                },
                shadowBlur: 10,
                shadowColor: "#000",
              },
            },
            label: {
              fontSize: 22,
              color: "rgb(0, 255, 0)",
            },
            backgroundStyle: {
              color: {
                type: "linear",
                x: 1,
                y: 0,
                x2: 0.5,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "rgba(68, 145, 253, 0)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(68, 145, 253, .25)",
                  },
                  {
                    offset: 0,
                    color: "rgba(68, 145, 253, 1)",
                  },
                ],
                globalCoord: false,
              },
            },
          },
          {
            radius: "80%",
            type: "liquidFill",
            center: ["51%", "55%"],
            data: [{ value: 0 }],
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderWidth: 4,
                borderColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(69, 73, 240, 0)",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(69, 73, 240, .25)",
                    },
                    {
                      offset: 1,
                      color: "rgba(69, 73, 240, 1)",
                    },
                  ],
                  globalCoord: false,
                },
                shadowBlur: 10,
                shadowColor: "#000",
              },
            },
            label: {
              fontSize: 22,
              color: "rgb(0, 255, 0)",
            },
            backgroundStyle: {
              color: {
                type: "linear",
                x: 1,
                y: 0,
                x2: 0.5,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "rgba(68, 145, 253, 0)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(68, 145, 253, .25)",
                  },
                  {
                    offset: 0,
                    color: "rgba(68, 145, 253, 1)",
                  },
                ],
                globalCoord: false,
              },
            },
          },
          {
            radius: "80%",
            type: "liquidFill",
            center: ["71%", "55%"],
            data: [{ value: 0 }],
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderWidth: 4,
                borderColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(69, 73, 240, 0)",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(69, 73, 240, .25)",
                    },
                    {
                      offset: 1,
                      color: "rgba(69, 73, 240, 1)",
                    },
                  ],
                  globalCoord: false,
                },
                shadowBlur: 10,
                shadowColor: "#000",
              },
            },
            label: {
              fontSize: 22,
              color: "rgb(0, 255, 0)",
            },
            backgroundStyle: {
              color: {
                type: "linear",
                x: 1,
                y: 0,
                x2: 0.5,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "rgba(68, 145, 253, 0)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(68, 145, 253, .25)",
                  },
                  {
                    offset: 0,
                    color: "rgba(68, 145, 253, 1)",
                  },
                ],
                globalCoord: false,
              },
            },
          },
          {
            radius: "80%",
            type: "liquidFill",
            center: ["91%", "55%"],
            data: [{ value: 0 }],
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderWidth: 4,
                borderColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(69, 73, 240, 0)",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(69, 73, 240, .25)",
                    },
                    {
                      offset: 1,
                      color: "rgba(69, 73, 240, 1)",
                    },
                  ],
                  globalCoord: false,
                },
                shadowBlur: 10,
                shadowColor: "#000",
              },
            },
            label: {
              fontSize: 22,
              color: "rgb(0, 255, 0)",
            },
            backgroundStyle: {
              color: {
                type: "linear",
                x: 1,
                y: 0,
                x2: 0.5,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "rgba(68, 145, 253, 0)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(68, 145, 253, .25)",
                  },
                  {
                    offset: 0,
                    color: "rgba(68, 145, 253, 1)",
                  },
                ],
                globalCoord: false,
              },
            },
          },
        ],
      },
      timerName: "MSSQLServerFileSystemImfor",
      timerEventName: "MSSQLtimerServerFileSystemImfor",
      timerInterval: 1000 * 60,
      timerNames: "MSSQLServerFileSystemImfors",
      timerEventNames: "MSSQLtimerServerFileSystemImfors",
      timerIntervals: 1000 * 2,
      selectedMonID: {},
      osDataArr: [],
      NoNum: 0,
      resultData: [],
      // ServerFileSystemImfor:''
    };
  },
  created() {
    bus.$on("selectedMonIDSqlServer", (msg) => {
      this.resetData();

      
      this.drawMemoryLine();
     
           this.initGetData();
           this.getData(msg)
      // this.initGetData();
    });

    bus.$emit("timerNewTodo", {
      name: this.timerName,
      eventName: this.timerEventName,
      interval: this.timerInterval,
      intervalNow: 0,
    });
    // bus.$emit("timerNewTodo", {
    //   name: this.timerNames,
    //   eventName: this.timerEventNames,
    //   interval: this.timerIntervals,
    //   intervalNow: 0,
    // });

    bus.$on(this.timerEventName, (msg) => {
      // console.log(this.osDataArr.length);

      if (msg.isGetData) {
        // this.resetData();
        // this.getData();
      }
    });
    // bus.$on(this.timerEventNames, (_) => {
    //   // if (this.resultData.length > 5) {
    //     this.selectWaterData();
    //   // }
    // });
  },
  mounted() {
    this.waterPolo = this.$echarts.init(this.$refs.waterPolo);
    this.drawMemoryLine();
  },
  computed: {
    postDataFn() {
      return {
        postData: JSON.stringify(this.postData),
      };
    },
  },
  methods: {
    initGetData() {
      this.waterPolo.showLoading({
        text: "加载中...",
        color: "#c23531",
        textColor: "#fff",
        maskColor: "rgba(2, 16, 51, 0.8)",
        zlevel: 0,
        fontSize: 12,
        showSpinner: true,
        spinnerRadius: 10,
        lineWidth: 5,
      });
      //2021 0602 start
      // let _postData = {
      //     opera: 'CpuUsageLine',
      //     filters: {
      //         "monid": this.postData.filters.monid,
      //         "pointNum": this.getNum
      //     },
      // };

      // fetchData({
      //     postData : JSON.stringify(_postData)
      // }).then((res) => {
      //     console.log(res)
      //     let _cpuNum = [];
      //     let _xAxisData = [];

      //     if (res.dataTotal > 0) {
      //         res.data.forEach(element => {

      //             _cpuNum.push(Number((100 - element.CPU_IDLE).toFixed(1)));
      //             _xAxisData.push(element.RECORD_TIME);
      //         });

      //         this.cpuLastSN = [...res.data].pop().SN;
      //         this.cpuUsage = Number((100 - [...res.data].pop().CPU_IDLE).toFixed(1));
      //     }

      //     this.cpuData = _cpuNum;
      //     this.EChartsOption.xAxis.data = _xAxisData;

      //     this.CpuLoad.setOption({
      //         xAxis: {
      //             data: _xAxisData
      //         },
      //         series: {
      //             data: _cpuNum
      //         }
      //     });

      //     this.ServerFileSystemImfor.hideLoading();
      // });
      //2021 0602 end
    },
    async getData(msg) {
      let postDatas = {
        opera: "hostconnect",
        curPage: 1,
        pageSize: 2000,
        sort: {
          sortColumn: "monid",
          sortOrders: "asc",
        },
        filtersType: "exclude",
        filters: {
          os_type: "Network",
        },
      };
      await fetchData({
        postData: JSON.stringify(postDatas),
      }).then((res) => {
        if (res) {
          this.selectedMonID = res.data.filter((item) => {
            return item.IP.includes(msg.IP);
          });

          if (this.selectedMonID.length) {
            this.postData.filters.monid = this.selectedMonID[0].MONID;
            this.getItemData()
          } else {
            this.postData.filters.monid = ''
            this.waterPolo.hideLoading();
          }
        }
      });
      // console.log(this.postDataFn);
     
    },
    async getItemData(){
       await fetchData(this.postDataFn).then((res) => {
        
        if(res.dataTotal==0){return};
        
        this.resultData = [];
        this.osDataArr = [];

        // console.log(res)
        // this.resultData = res.data;
        if(res.data.length>5){
               res=bubbleSort(res.data,'USED_PER');
          


            }
            // console.table(res)
          res=res.data
          
          for (let i = 0; i < res.length; i++) {
            this.osDataArr.push({
              USED_PER: res[i].USED_PER,
              FREE_GB: res[i].FREE_GB,
              TOTAL_GB: res[i].TOTAL_GB.toFixed(2),
              MOUNTED_ON:res[i].MOUNTED_ON.length > 6? this.spiltDataBaseName(res[i].MOUNTED_ON): res[i].MOUNTED_ON,
            });
          }

        // if (this.osDataArr.length > 5) {
        //   // this.osDataArr.forEach((element, index) => {
        //   //     this.EChartsOption.series[index].data[0].value = element.USED_PER;
        //   // });

        //   // this.freeGB = this.osDataArr[0].FREE_GB.toFixed(0) + ' MB';
        //   // this.totalGB = this.osDataArr[0].TOTAL_GB.toFixed(0) + ' MB';
        //   // this.EChartsOption.series[0].data[0].value = this.osDataArr[0].USED_PER.toFixed(2);

        //   this.resultData = res.data;
        //   for (let i = 0; i < 5; i++) {
        //     this.osDataArr.push({
        //       USED_PER: res.data[i].USED_PER,
        //       FREE_GB: res.data[i].FREE_GB,
        //       TOTAL_GB: res.data[i].TOTAL_GB.toFixed(2),
        //       MOUNTED_ON:
        //         this.resultData[this.NoNum].MOUNTED_ON.length > 6
        //           ? this.spiltDataBaseName(
        //               this.resultData[this.NoNum].MOUNTED_ON
        //             )
        //           : this.resultData[this.NoNum].MOUNTED_ON,
        //     });
        //   }

        //   this.initEchart();
        // } else if (this.osDataArr.length > 0) {
        //   this.osDataArr.forEach((element, index) => {
        //     this.EChartsOption.series[index].data[0].value = element.USED_PER;
        //   });

        //   this.freeGB = this.osDataArr[0].FREE_GB.toFixed(0) + " MB";
        //   this.totalGB = this.osDataArr[0].TOTAL_GB.toFixed(0) + " MB";
        //   this.EChartsOption.series[0].data[0].value =this.osDataArr[0].USED_PER.toFixed(2);
        // } else {
        //   this.freeGB = 0;
        //   this.totalGB = 0;
        //   this.EChartsOption.series[0].data[0].value = 0;
        // }

        this.initEchart()
        this.drawMemoryLine();
        // this.waterPolo.hideLoading();
      }).finally((_) => {
          this.waterPolo.hideLoading();
        });
    },
    initEchart() {
      if (this.osDataArr.length > 0) {
        this.osDataArr.forEach((element, index) => {
          this.EChartsOption.series[index].data[0].value = element.USED_PER;
        });

        // this.freeGB = this.osDataArr[0].FREE_GB.toFixed(0) + " MB";
        // this.totalGB = this.osDataArr[0].TOTAL_GB.toFixed(0) + " MB";
        // this.EChartsOption.series[0].data[0].value =this.osDataArr[0].USED_PER.toFixed(2);
      } else {
        this.freeGB = 0;
        this.totalGB = 0;
        this.EChartsOption.series[0].data[0].value = 0;
      }
    },
    drawMemoryLine() {
      this.waterPolo.setOption(this.EChartsOption, true);
    },
    resetData() {
      this.osDataArr = [];
      this.resultData = "";
      this.NoNum = 5;
      this.EChartsOption.series[0].data[0].value = 0;
      this.EChartsOption.series[1].data[0].value = 0;
      this.EChartsOption.series[2].data[0].value = 0;
      this.EChartsOption.series[3].data[0].value = 0;
      this.EChartsOption.series[4].data[0].value = 0;
    },
    selectWaterData() {
      if (this.resultData[this.NoNum]) {
        this.osDataArr.shift();
        this.osDataArr.push({
          USED_PER: this.resultData[this.NoNum].USED_PER,
          FREE_GB: this.resultData[this.NoNum].FREE_GB,
          TOTAL_GB: this.resultData[this.NoNum].TOTAL_GB.toFixed(2),
          MOUNTED_ON:
            this.resultData[this.NoNum].MOUNTED_ON.length > 6
              ? this.spiltDataBaseName(this.resultData[this.NoNum].MOUNTED_ON)
              : this.resultData[this.NoNum].MOUNTED_ON,
        });

        this.initEchart();
        this.drawMemoryLine();
        this.NoNum++;
      } else {
        this.NoNum = 0;
      }
    },
    spiltDataBaseName(data) {
      return data.slice(0, 4) + "**";
    },
  },
  beforeDestroy() {
    bus.$emit("timerNewTodo", {
      name: this.timerName,
    });
    // bus.$emit("timerNewTodo", {
    //   name: this.timerNames,
    // });

    this.waterPolo.dispose();
    bus.$off('selectedMonIDSqlServer')
  },
  watch: {},
};
</script>

<style scoped>
.ServerFileSystemImfor {
  height: calc(100% - 22px - 8px);
  margin-bottom: 0 !important;
  text-align: left;
}

.el-col-5 {
  width: 20% !important;
}
.basicImformation {
  background-color: rgba(0, 0, 0, 0);
}
.twoLable >>> .el-form-item__label {
  color: aliceblue;
  line-height: 16px;
  font-size: small;
  padding: 0 0 0 0;
}
.twoLable >>> .el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 0px;
  margin-right: 0px;
}
.serverFileText {
  padding-top: 1%;
}
.waterPage {
  padding-left: 0px !important;
  padding-right: 0px !important;
  /* padding-top: 4%; */
}
.page {
  min-height: 80px;
  /* height: calc(100% - 40%); */
  /* display: grid;
    grid-template-columns:repeat(1fr,3) ; */
}
.butomLable {
  height: calc(100% - 80%);
  padding-top: 5%;
  padding-left: 1% !important;
  padding-right: 0px !important;
  text-align: center;
  text-align: left;
}
.oneLable >>> .el-form-item__label {
  padding: 0 0 0 0;
  color: aliceblue;
  font-size: xx-small;
  text-align: center;
}
.lableNumber {
  color: aliceblue;
  width: auto;
  font-size: xx-small;
}
.oneLable {
  font-size: 12px;
}
</style>    